<template>
	<view class="rider-client">
		<view class="tab-bar">
			<text v-for="(item, index) in tabs"
				:key="index"
				:class="['tab-item', tabIndex == index ? 'tab-item-active' : '']"
				@click="tabChange(index)">{{item.text}}</text>
			<view class="tab-placeholder"></view>
			<image src="/static/qr.svg" mode="aspectFit" class="tab-qr" @click="qr()"></image>
			<image src="/static/tab-slider.svg"
				mode="aspectFit"
				class="tab-slider"
				:style="{left: tabs[tabIndex].left}"></image>
		</view>
		<view class="main">
			<view class="ti-order-wrapper" v-for="(item, index) in list" :key="index" @click="detail(index)">
				<view class="ti-order-item">
					<view class="flow-main">
						<view class="item-left">
							<view class="order-title">
								<text class="order-number">订单号: {{item.orderId}}</text>
							</view>
							<view class="flow">
								<view class="flow-item">
									<view class="flow-title">
										<view class="flow-title-tip"></view>
										<text class="flow-title-text">{{item.storeShopDO.name}}</text>
									</view>
									<view class="flow-content">
										<text class="flow-content-text">{{item.storeShopDO.address}}</text>
									</view>
								</view>
								<view class="flow-item">
									<view class="flow-title">
										<view class="flow-title-tip"></view>
										<text class="flow-title-text">{{item.userAddressName || ''}}</text>
									</view>
									<view class="flow-content">
										<text class="flow-content-text">{{item.userAddress}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="track">
							<text>取单号</text>
							<text class="track-number">{{item.gainOrderNumber}}</text>
						</view>
					</view>
					<view class="order-info">
						<text class="order-info-text">订单金额: ¥{{item.totalPrice}}</text>
						<text class="order-info-text">下单时间: {{ruleTime(item.createTime)}}</text>
						<text class="order-info-text">订单备注: {{item.mark || ''}}</text>
					</view>
					<view class="order-control" v-if="tabIndex == 0">
						<text class="order-control-item contact" @click.stop="call(item.userPhone)">联系用户</text>
						<text class="order-control-item sent" @click.stop="openDialog(1, item)">订单送达</text>
					</view>
				</view>
			</view>
			<view class="empty-box" v-if="!list.length">
				<image src="/static/empty-data.svg" mode="aspectFit"></image>
				<text>订单为空</text>
			</view>
		</view>
		<view class="dialog" v-if="showDialog">
			<view class="dialog-mask" @click="showDialog = false"></view>
			<view class="dialog-wrapper">
				<view class="dialog-title">
					<text class="dialog-title-text">温馨提示</text>
					<image @click="showDialog = false" class="dialog-close" src="/static/close.svg" mode="aspectFit"></image>
				</view>
				<text class="dialog-subhead" v-if="dialogMode == 0">请确认您是否取餐~</text>
				<text class="dialog-subhead" v-else>请确认您的订单是否送达~</text>
				<image class="dialog-bell" src="/static/bell.svg" mode="aspectFit"></image>
				<view class="track" v-if="dialogMode == 0">
					<text>取单号</text>
					<text class="track-number">{{trackItem.gainOrderNumber}}</text>
				</view>
				<view class="track" v-else>
					<text class="dialog-track">{{trackItem.userAddressName || ''}}</text>
					<text class="track-location">{{trackItem.userAddress}}</text>
				</view>
				<view class="dialog-button" @click="trackOrConfirm()">
					<text v-if="dialogMode == 0">取餐</text>
					<text v-else>确认送达</text>
				</view>
			</view>
		</view>
		<view class="dialog dialog-success" v-if="showSuccess">
			<view class="dialog-mask" @click="showSuccess = false"></view>
			<view class="dialog-wrapper">
				<image @click="showSuccess = false" class="dialog-close" src="/static/close.svg" mode="aspectFit"></image>
				<image class="success-icon" src="/static/success.svg" mode="aspectFit"></image>
				<text class="success-text">{{successText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import rider from '@/api/rider.js'
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [
					{
						text: '配送中',
						left: '32rpx',
						status: 4
					},
					{
						text: '已完成',
						left: '206rpx',
						status: 1
					}
				],
				showDialog: false,
				dialogMode: 0,
				list: [],
				trackItem: {},
				showSuccess: false,
				successText: '取餐成功'
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				uni.getStorageSync('data') && rider
					.getOrderListByRider(uni.getStorageSync('data').data.userId, this.tabs[this.tabIndex].status)
					.then(res => {
						let { data } = res
						this.list = data || []
					})
			},
			trackOrConfirm() {
				this.dialogMode == 1 && uni.getStorageSync('data') && rider
					.delivery(this.trackItem.orderId, uni.getStorageSync('data').data.userId)
					.then(res => {
						let { code, msg } = res
						if (code == 0) {
							this.showDialog = false
							this.getList()
							this.successText = '送达成功'
							let wait = setTimeout(() => {
								this.showSuccess = true
								clearTimeout(wait)
							}, 1000)
							return
						}
						uni.toast({
							title: msg,
							icon: 'error'
						})
					})
				
				this.dialogMode == 0 && uni.getStorageSync('data') && rider
					.takeFood(this.trackItem.orderId, uni.getStorageSync('data').data.userId)
					.then(res => {
						let { code, msg } = res
						if (code == 0) {
							this.showDialog = false
							this.getList()
							this.successText = '取餐成功'
							let wait = setTimeout(() => {
								this.showSuccess = true
								clearTimeout(wait)
							}, 1000)
							return
						}
						uni.toast({
							title: msg,
							icon: 'error'
						})
					})
			},
			tabChange(index) {
				this.tabIndex = index
				this.getList()
			},
			detail(index) {
				uni.navigateTo({
					url: `./order-detail?orderId=${this.list[index].orderId}&status=${this.tabs[this.tabIndex].status}`
				})
			},
			qr() {
				uni.scanCode({
					onlyFromCamera: true,
					success: res => {
						uni.getStorageSync('data') && rider
							.scanCodes(res.result)
							.then(requestRes => {
								let { code } = requestRes
								if (code == 0) {
									rider.getOrderInfoById(res.result)
										.then(getRes => {
											let { data } = getRes
											this.trackItem = data
											this.dialogMode = 0
											this.showDialog = true
											this.getList()
										})
								} else {
									uni.showToast({
										title: '扫码错误',
										icon: 'error'
									})
								}
							})
					}
				})
			},
			openDialog(mode, item) {
				this.dialogMode = mode
				this.showDialog = true
				if (mode == 1) {
					this.trackItem = item
				}
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			ruleTime(time) {
				return rider.ruleTime(time, true)
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}
	
	.rider-client {
		--design-width: 750rpx;
		--design-height: 1334rpx;
		--tab-height: 80rpx;
	}
	
	.tab-bar {
		position: fixed;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		height: var(--tab-height);
		background: #f5f5f5;
		z-index: 999;
		display: flex;
		flex-direction: row;
		padding: 0 20rpx;
	}
	
	.tab-item {
		font-size: 26rpx;
		color: #333;
		padding: 0 calc(96rpx / 2);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		transition: ease 500ms;
	}
	
	.tab-item:nth-child(1) {
		padding-left: 0;
	}
	
	.tab-item-active {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.tab-placeholder {
		flex: 1;
	}
	
	.tab-qr {
		width: 40rpx;
		height: 36rpx;
		align-self: center;
	}
	
	.tab-slider {
		width: calc(var(--design-width) - 33rpx - 658rpx);
		height: calc(var(--design-height) - 215rpx - 1107rpx);
		position: absolute;
		bottom: 5rpx;
		transition: ease 150ms;
	}
	
	.main {
		padding: var(--tab-height) 20rpx 20rpx;
	}
	
	.ti-order-wrapper {
		padding-top: 20rpx;
	}
	
	.ti-order-item {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 -2px 8px 1px #eaeaea;
		padding: 20rpx;
		color: #333;
		display: flex;
		flex-direction: column;
	}
	
	.flow-main {
		display: flex;
		flex-direction: row;
	}
	
	.item-left {
		flex: 1;
	}
	
	.order-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26rpx;
	}
	
	.order-number {
		font-weight: bold;
		flex: 1;
	}
	
	.track {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.track-number {
		font-weight: bold;
		padding-top: 6px;
	}
	
	.flow {
		display: flex;
		flex-direction: column;
		padding-top: 8rpx;
		
	}
	
	.flow-item {
		display: flex;
		flex-direction: column;
	}
	
	.flow-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8rpx 0;
	}
	
	.flow-title-tip {
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		border: 2px solid #5caf5d;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flow-title-tip::after {
		content: '';
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #5caf5d;
	}
	
	.flow-title-text {
		font-size: 26rpx;
		padding-left: 28rpx;
		flex: 1;
	}
	
	.flow-content {
		font-size: 24rpx;
		color: #b4b4b4;
		padding: 0 0 0 16rpx;
		display: flex;
		flex-direction: row;
	}
	
	.flow-content::before {
		content: '';
		width: calc(28rpx + 16rpx);
		box-sizing: border-box;
		border-left: 1px dashed #5caf5d;
	}
	
	.flow-item:nth-last-child(1) .flow-content::before {
		border: none;
	}
	
	.flow-content-text {
		padding: 14rpx 0;
	}
	
	.order-info {
		padding-top: 16rpx;
		border-top: 1px dashed #e4e4e4;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
	}
	
	.order-info-text {
		padding-top: 16rpx;
	}
	
	.order-info-text:nth-child(1) {
		padding-top: 0;
	}
	
	.order-control {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: bold;
		padding-top: 16rpx;
	}
	
	.order-control-item {
		padding: 18rpx 78rpx;
		border-radius: 39rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.contact {
		border: 2px solid #5caf5d;
		color: #5caf5d;
	}
	
	.sent {
		background: #5caf5d;
		color: #fff;
	}
	
	.empty-box {
		height: calc(100vh - var(--tab-height) - 20rpx - 400rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.empty-box image {
		--size: 400rpx;
		width: var(--size);
		height: var(--size);
	}
	
	.empty-box text {
		font-size: 28rpx;
		color: #86a7e0;
		font-weight: bold;
	}
	
	.dialog {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
	}
	.dialog-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	
	.dialog-wrapper {
		width: calc(100% - (82rpx * 2));
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 2;
	}
	
	.dialog-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.dialog-title-text {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.dialog-close {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	
	.dialog-subhead {
		font-size: 26rpx;
		padding: 30rpx 0 24rpx 0;
	}
	
	.dialog-bell {
		width: 92rpx;
		height: 100rpx;
		align-self: center;
		padding-bottom: 20rpx;
	}
	
	.dialog-track {
		font-size: 26rpx;
	}
	
	.track-location {
		font-size: 24rpx;
		color: #bbbbbb;
		padding-top: 20rpx;
	}
	
	.dialog-button {
		width: 440rpx;
		height: 64rpx;
		background: #5caf5d;
		border-radius: 32rpx;
		color: #fff;
		font-size: 26rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		align-self: center;
	}
	
	.dialog-success .dialog-close {
		top: 20rpx;
		right: 20rpx;
		transform: none;
	}
	
	.success-icon {
		width: 237rpx;
		height: 140rpx;
		align-self: center;
	}
	
	.success-text {
		font-size: 30rpx;
		color: #333;
		padding-top: 36rpx;
		align-self: center;
	}
</style>
